<template>
  <div class="tool-right">
    <template>
      <a-form v-show="windowWidth >= 1000" layout="inline">
        <a-form-item>
          <a-button v-btn="['undo']"></a-button>
        </a-form-item>
        <a-form-item>
          <a-button v-btn="['redo']"></a-button>
        </a-form-item>
        <a-form-item style="margin-right: 0;">
          <template v-if="unsave">
            <template slot="icon">
              <svg-icon type="home-confirm" />
            </template>
            <a-button @click="unsave ? handleModal() : handleExit()">
              <svg-icon :type="tooler.exit.icon" />
              {{ tooler.exit.label }}
            </a-button>
          </template>
          <template v-else>
            <a-button @click="handleExit">
              <svg-icon :type="tooler.exit.icon" />
              {{ tooler.exit.label }}
            </a-button>
          </template>
        </a-form-item>
      </a-form>
    </template>
    <template>
      <a-form v-show="windowWidth < 1000" layout="inline">
        <a-form-item>
          <a-dropdown>
            <a @click="(e) => e.preventDefault()">
              <a-icon style="color: white;" type="menu" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item @click="handleSave">
                <svg-icon :type="tooler.save.icon" />
                {{ tooler.save.label }}
              </a-menu-item>
              <a-menu-item @click="handlePreview">
                <svg-icon :type="tooler.preview.icon" />
                {{ tooler.preview.label }}
              </a-menu-item>
              <a-menu-item @click="handleUndo">
                <svg-icon :type="tooler.undo.icon" />
                {{ tooler.undo.label }}
              </a-menu-item>
              <a-menu-item @click="handleRedo">
                <svg-icon :type="tooler.redo.icon" />
                {{ tooler.redo.label }}
              </a-menu-item>
              <a-menu-item @click="unsave ? handleModal() : handleExit()">
                <svg-icon :type="tooler.exit.icon" />
                {{ tooler.exit.label }}
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-form-item>
      </a-form>
    </template>
  </div>
</template>

<script>
import window from '@/mixins/window'
import tool from '@/mixins/tooler'
import { getConfiguredViewsDetailInfo } from '@/api/home.js'
import { compareDeep } from '@/utils'

export default {
  name: 'ToolRight',
  mixins: [window, tool],
  data() {
    return {
      unsave: false,
    }
  },
  methods: {
    handleCompare(schema) {
      getConfiguredViewsDetailInfo({
        viewId: this.$route.params.id,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        if (res.code == '0') {
          if (res.data.viewValue) {
            const _schema = JSON.parse(res.data.viewValue)
            this.unsave = compareDeep(_schema, schema)
          } else {
            this.unsave =
              schema.name != res.data.viewName ||
              schema.cover != res.data.viewCoverAddress
          }
        }
      })
    },
    // @override 重写exit
    handleExit() {
      this.$router.push({
        path: '/home',
      })
    },
    handleModal() {
      const that = this;
      this.$confirm({
        title: '提示',
        content: '存在未保存内容，确定退出？',
        icon: h => <a-icon type="info-circle" theme="filled" style="color: white"/>,
        centered: true,
        maskClosable: true,
        closable: true,
        onOk() {
          that.handleExit()
        },
        onCancel() {
          console.log('cancel')
        }
      })
    }
  },
  watch: {
    schema: {
      deep: true,
      immediate: true,
      handler(val, oldVal) {
        this.handleCompare(val)
      },
    },
    'getComponentList.length': {
      immediate: true,
      handler(val, oldVal) {
        console.log('val', val, val != 0)
        this.unsave ||= val != 0
      },
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/styles/cover.less';
.tool-right {
  display: flex;
  align-items: center;
  justify-content: right;
  position: absolute;
  top: 6px;
  right: 0;
  .ant_btn_reset();
}
</style>
